<template>
  <div>
    <el-card class="box-card">
      <el-form
        ref="elForm"
        :model="formData"
        :rules="rules"
        size="medium"
        label-width="100px"
      >
        <el-row :gutter="15">
          <el-col :span="7">
            <el-form-item label-width="140px" label="身高(CM)" prop="stature">
              <el-input
                v-model="formData.stature"
                placeholder="请输入身高(CM)"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label-width="140px" label="体重(KG)" prop="weight">
              <el-input
                v-model="formData.weight"
                placeholder="请输入体重(KG)"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label-width="140px" label="腰围(CM)" prop="waistline">
              <el-input
                v-model="formData.waistline"
                placeholder="请输入腰围(CM)"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="5">
            <el-form-item label="血压" prop="historyBloodPressure">
              <el-input
                v-model="formData.historyBloodPressure"
                placeholder="请输入血压"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="血糖" prop="historyBloodGlucose">
              <el-input
                v-model="formData.historyBloodGlucose"
                placeholder="请输入血糖"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="遗传病史" prop="historyGeneticHistory">
              <el-input
                v-model="formData.historyGeneticHistory"
                placeholder="请输入遗传病史"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="既往病史" prop="historyAnamnesis">
              <el-input
                v-model="formData.historyAnamnesis"
                placeholder="请输入既往病史"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="7">
            <el-form-item
              label-width="140px"
              label="药物过敏史"
              prop="historyDrugAllergyHistory"
            >
              <el-select
                v-model="formData.historyDrugAllergyHistory"
                placeholder="请选择药物过敏史"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(item, index) in dict.type.user_healthy_allergic"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item
              label-width="140px"
              label="家族病史"
              prop="historyFamilyMedicalHistory"
            >
              <el-select
                v-model="formData.historyFamilyMedicalHistory"
                placeholder="请选择家族病史"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(item, index) in dict.type.user_healthy_sickness"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label-width="140px" label="慢性病" prop="historyChronicDisease">
              <el-select
                v-model="formData.historyChronicDisease"
                placeholder="请选择慢性病"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(item, index) in dict.type.user_healthy_sickness"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="7">
            <el-form-item
              label-width="140px"
              label="健康状况自评"
              prop="conditionAssessment"
            >
              <el-select
                v-model="formData.conditionAssessment"
                placeholder="请选择健康状况自评"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(item, index) in dict.type.user_healthy_sickness1"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item
              label-width="140px"
              label="自理能力自评"
              prop="conditionAbility"
            >
              <el-select
                v-model="formData.conditionAbility"
                placeholder="请选择自理能力自评"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(item, index) in dict.type.user_healthy_appraise"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item
              label-width="140px"
              label="身体状况"
              prop="conditionPhysicalCondition"
            >
              <el-select
                v-model="formData.conditionPhysicalCondition"
                placeholder="请选择身体状况"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(item, index) in dict.type.user_healthy_body"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="7">
            <el-form-item
              label-width="140px"
              label="心理特征"
              prop="conditionPsychologicalStates"
            >
              <el-select
                v-model="formData.conditionPsychologicalStates"
                placeholder="请选择心理特征"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(item, index) in dict.type.user_healthy_psychology"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item
              label-width="140px"
              label="痴呆前兆"
              prop="conditionDementiaPrecursor"
            >
              <el-select
                v-model="formData.conditionDementiaPrecursor"
                placeholder="请选择痴呆前兆"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(item, index) in dict.type.user_healthy_dementia"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item
              label-width="140px"
              label="现存症状"
              prop="conditionExistingSymptom"
            >
              <el-select
                v-model="formData.conditionExistingSymptom"
                placeholder="请选择现存症状"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(item, index) in dict.type.user_healthy_symptoms"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="7">
            <el-form-item label-width="140px" label="饮食习惯" prop="habitDietary">
              <el-select
                v-model="formData.habitDietary"
                placeholder="请选择饮食习惯"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(item, index) in dict.type.user_healthy_diet"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label-width="140px" label="饮酒情况" prop="habitDrink">
              <el-select
                v-model="formData.habitDrink"
                placeholder="请选择饮酒情况"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(item, index) in dict.type.user_healthy_drinking"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label-width="140px" label="日抽烟情况" prop="habitSmoking">
              <el-select
                v-model="formData.habitSmoking"
                placeholder="请选择日抽烟情况"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(item, index) in dict.type.user_healthy_smoke"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="7">
            <el-form-item label-width="140px" label="体育锻炼" prop="habitTakeExercise">
              <el-select
                v-model="formData.habitTakeExercise"
                placeholder="请选择体育锻炼"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(item, index) in dict.type.user_healthy_exercise"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label-width="140px" label="日睡眠情况" prop="habitSleep">
              <el-select
                v-model="formData.habitSleep"
                placeholder="请选择日睡眠情况"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(item, index) in dict.type.user_healthy_sleep"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label-width="140px" label="是否长期用药" prop="habitPharmacy">
              <el-select
                v-model="formData.habitPharmacy"
                placeholder="请选择是否长期用药"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(item, index) in dict.type.iot_yes_no"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item size="large">
          <el-button type="primary" @click="submitForm">提交</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
      <el-row>
        <el-col :span="12">
          <h3>住院情况</h3>
          <el-button type="primary" plain style="margin: 10px" @click="medicine"
            >新增</el-button
          >
          <el-table :data="medicineList.oldManMedicationList" border style="width: 100%">
            <el-table-column prop="drugName" label="药名 " width="150"> </el-table-column>
            <el-table-column prop="dailyDosage" label="每日用量 " width="120">
              <template slot-scope="scope">
                <dict-tag
                  :options="dict.type.user_drug_day"
                  :value="scope.row.dailyDosage"
                />
              </template>
            </el-table-column>
            <el-table-column prop="isMedicationTime" label="用药时间" width="120">
              <template slot-scope="scope">
                <dict-tag
                  :options="dict.type.user_drug_date"
                  :value="scope.row.isMedicationTime"
                />
              </template>
            </el-table-column>
            <el-table-column prop="medicationDuration" label="服药依从性" width="120">
              <template slot-scope="scope">
                <dict-tag
                  :options="dict.type.user_drug_rely"
                  :value="scope.row.medicationDuration"
                />
              </template>
            </el-table-column>
            <el-table-column label="操作" width="100">
              <template slot-scope="scope">
                <el-button @click="delClick(scope.row)" type="text" size="small"
                  >删除</el-button
                >
                <el-button type="text" @click="edClick(scope.row)" size="small"
                  >编辑</el-button
                >
              </template>
            </el-table-column>
          </el-table></el-col
        >
        <el-col :span="12">
          <h3>住院情况</h3>
          <el-button type="primary" plain style="margin: 10px" @click="hospitalization"
            >新增</el-button
          >
          <el-table
            :data="medicineList.oldManHospitalizationList"
            border
            style="width: 100%"
          >
            <el-table-column
              prop="admissionDate"
              label="最近第一次入住时间"
              width="150"
            ></el-table-column>
            <el-table-column prop="hospitalStays" label="住院原因" width="120">
            </el-table-column>
            health_recovery
            <el-table-column prop="recoveryCondition" label="健康恢复情况" width="120">
              <template slot-scope="scope">
                <dict-tag
                  :options="dict.type.health_recovery"
                  :value="scope.row.recoveryCondition"
                />
              </template>
            </el-table-column>
            <el-table-column prop="inpatientInstitution" label="住院机构" width="120">
            </el-table-column>
            <el-table-column label="操作" width="100">
              <template slot-scope="scope">
                <el-button @click="deleteClick(scope.row)" type="text" size="small"
                  >删除</el-button
                >
                <el-button type="text" @click="editClick(scope.row)" size="small"
                  >编辑</el-button
                >
              </template>
            </el-table-column>
          </el-table></el-col
        >
      </el-row>
      <medicines
        :oldManId="oldManId"
        :dialogMedicines="dialogMedicines"
        :ruleForm="medicinesDetail"
        @onclises="onclises"
      />
      <dialoghospitalization
        :oldManId="oldManId"
        :ruleForm="hospitalizationDetail"
        :dialoghospitalization="dialoghospitalization"
        @onclise="onclise"
      />
    </el-card>
  </div>
</template>
<script>
import {
  getCondition,
  addCondition,
  updateCondition,
  delCondition,
  delmedication,
  delhospitalization,
  updatemedication,
} from "@/api/cluster/condition";
import medicines from "./medicine.vue";
import dialoghospitalization from "./dialoghospitalization.vue";

export default {
  components: { medicines, dialoghospitalization },
  props: [],
  dicts: [
    "user_healthy_allergic",
    "user_healthy_sickness",
    "user_healthy_chronic",
    "user_healthy_sickness1",
    "user_healthy_appraise",
    "user_healthy_body",
    "user_healthy_psychology",
    "user_healthy_dementia",
    "user_healthy_symptoms",
    "user_healthy_diet",
    "user_healthy_drinking",
    "user_healthy_smoke",
    "user_healthy_exercise",
    "user_healthy_sleep",
    "iot_yes_no",
    "user_drug_date",
    "user_drug_rely",
    "user_drug_day",
    "health_recovery",
  ],
  data() {
    return {
      medicinesDetail: {},
      hospitalizationDetail: {},
      oldManMedicationList: [],
      oldManId: null,
      medicineList: [],
      dialogMedicines: false,
      dialoghospitalization: false,
      tableData: [],
      formData: {
        stature: undefined,
        weight: undefined,
        waistline: undefined,
        historyBloodPressure: undefined,
        historyBloodGlucose: undefined,
        historyGeneticHistory: undefined,
        historyAnamnesis: undefined,
        historyDrugAllergyHistory: undefined,
        historyFamilyMedicalHistory: undefined,
        historyChronicDisease: undefined,
        conditionAssessment: undefined,
        conditionAbility: undefined,
        conditionPhysicalCondition: undefined,
        conditionPsychologicalStates: undefined,
        conditionDementiaPrecursor: undefined,
        conditionExistingSymptom: undefined,
        habitDietary: undefined,
        habitDrink: undefined,
        habitSmoking: undefined,
        habitTakeExercise: undefined,
        habitSleep: undefined,
        habitPharmacy: undefined,
      },
      rules: {
        stature: [
          {
            required: true,
            message: "请输入身高(CM)",
            trigger: "blur",
          },
        ],
        weight: [
          {
            required: true,
            message: "请输入体重(KG)",
            trigger: "blur",
          },
        ],
        waistline: [
          {
            required: true,
            message: "请输入腰围(CM)",
            trigger: "blur",
          },
        ],
        historyBloodPressure: [
          {
            required: true,
            message: "请输入血压",
            trigger: "blur",
          },
        ],
        historyBloodGlucose: [
          {
            required: true,
            message: "请输入血糖",
            trigger: "blur",
          },
        ],
        historyGeneticHistory: [
          {
            required: true,
            message: "请输入遗传病史",
            trigger: "blur",
          },
        ],
        historyAnamnesis: [
          {
            required: true,
            message: "请输入既往病史",
            trigger: "blur",
          },
        ],
        historyDrugAllergyHistory: [
          {
            required: true,
            message: "请选择药物过敏史",
            trigger: "change",
          },
        ],
        historyFamilyMedicalHistory: [
          {
            required: true,
            message: "请选择家族病史",
            trigger: "change",
          },
        ],
        historyChronicDisease: [
          {
            required: true,
            message: "请选择慢性病",
            trigger: "change",
          },
        ],
        conditionAssessment: [
          {
            required: true,
            message: "请选择健康状况自评",
            trigger: "change",
          },
        ],
        conditionAbility: [
          {
            required: true,
            message: "请选择自理能力自评",
            trigger: "change",
          },
        ],
        conditionPhysicalCondition: [
          {
            required: true,
            message: "请选择身体状况",
            trigger: "change",
          },
        ],
        conditionPsychologicalStates: [
          {
            required: true,
            message: "请选择心理特征",
            trigger: "change",
          },
        ],
        conditionDementiaPrecursor: [
          {
            required: true,
            message: "请选择痴呆前兆",
            trigger: "change",
          },
        ],
        conditionExistingSymptom: [
          {
            required: true,
            message: "请选择现存症状",
            trigger: "change",
          },
        ],
        habitDietary: [
          {
            required: true,
            message: "请选择饮食习惯",
            trigger: "change",
          },
        ],
        habitDrink: [
          {
            required: true,
            message: "请选择饮酒情况",
            trigger: "change",
          },
        ],
        habitSmoking: [
          {
            required: true,
            message: "请选择日抽烟情况",
            trigger: "change",
          },
        ],
        habitTakeExercise: [
          {
            required: true,
            message: "请选择体育锻炼",
            trigger: "change",
          },
        ],
        habitSleep: [
          {
            required: true,
            message: "请选择日睡眠情况",
            trigger: "change",
          },
        ],
        habitPharmacy: [
          {
            required: true,
            message: "请选择是否长期用药",
            trigger: "change",
          },
        ],
      },
    };
  },
  computed: {},
  watch: {},
  created() {
    this.oldManId = this.$route.query.id;
    this.getMedicine();
  },
  mounted() {},
  methods: {
    getMedicine() {
      this.loading = true;
      console.log(this.$route.query.id);
      getCondition(this.$route.query.id).then((response) => {
        if (response.data) {
          this.medicineList = response.data;
          this.formData = response.data;
          this.formData.historyDrugAllergyHistory = String(
            response.data.historyDrugAllergyHistory
          );
          this.formData.historyFamilyMedicalHistory = String(
            response.data.historyFamilyMedicalHistory
          );
          this.formData.historyChronicDisease = String(
            response.data.historyChronicDisease
          );
          this.formData.conditionAssessment = String(response.data.conditionAssessment);
          this.formData.conditionAbility = String(response.data.conditionAbility);
          this.formData.conditionPhysicalCondition = String(
            response.data.conditionPhysicalCondition
          );
          this.formData.conditionPsychologicalStates = String(
            response.data.conditionPsychologicalStates
          );
          this.formData.conditionDementiaPrecursor = String(
            response.data.conditionDementiaPrecursor
          );
          this.formData.conditionExistingSymptom = String(
            response.data.conditionExistingSymptom
          );
          this.formData.habitDietary = String(response.data.habitDietary);
          this.formData.user_healthy_drinking = String(
            response.data.user_healthy_drinking
          );
          this.formData.habitTakeExercise = String(response.data.habitTakeExercise);
          this.formData.habitSleep = String(response.data.habitSleep);
          this.formData.habitPharmacy = String(response.data.habitPharmacy);
          this.formData.habitSmoking = String(response.data.habitSmoking);
          this.total = response.total;
        }

        this.loading = false;
      });
    },
    onclises() {
      this.dialogMedicines = false;
      this.getMedicine();
    },
    onclise() {
      this.dialoghospitalization = false;
      this.getMedicine();
    },
    //药新增
    medicine() {
      this.hospitalizationDetail = {};

      this.dialogMedicines = true;
    },
    hospitalization() {
      this.hospitalizationDetail = {};
      this.dialoghospitalization = true;
    },
    edClick(row) {
      this.dialogMedicines = true;
      this.medicinesDetail = JSON.parse(JSON.stringify(row));
      this.medicinesDetail.isMedicationTime = String(row.isMedicationTime);
      this.medicinesDetail.medicationDuration = String(row.medicationDuration);
      this.medicinesDetail.dailyDosage = String(row.dailyDosage);
      console.log(this.medicinesDetail);
    },
    editClick(row) {
      this.hospitalizationDetail = JSON.parse(JSON.stringify(row));
      this.hospitalizationDetail.recoveryCondition = String(row.recoveryCondition);
      this.dialoghospitalization = true;
    },
    //住院新增
    handleClick(row) {
      console.log(row);
    },
    //删除
    deleteClick(row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delhospitalization(row.id).then((res) => {
            this.getMedicine();
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //删除
    delClick(row) {
      console.log(row, "------------------");
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delmedication(row.id).then((res) => {
            this.getMedicine();
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    submitForm() {
      this.$refs["elForm"].validate((valid) => {
        if (valid) {
          this.formData.oldManId = this.$route.query.id;
          if (this.formData.id) {
            updateCondition(this.formData).then((res) => {
              this.$router.go(-1);
            });
          } else {
            addCondition(this.formData).then((res) => {
              console.log(res, "----------------");
              this.$router.go(-1);
            });
          }
        }
      });
    },
    resetForm() {
      this.$refs["elForm"].resetFields();
    },
  },
};
</script>
<style></style>
